<template>
  <div class="h-full">
    <div class="text-center">
      <span class="demonstration text-1xl">社情信息轮播</span>
      <dv-scroll-board
        :config="config"
        style="height: 220px"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import type { PropType } from "vue";
import type { Sheqing } from "@/apis/homeApi";

const props = defineProps({
  data: {
    type: Object as PropType<Sheqing>,
    require: true,
  },
});


const config = reactive({
    // data: [
    //   ['<span>12345平台 2025-02-19 16:38:24接到关于双桥区南营子派出所民警态度不好的相关问题的诉求</span>'],
    //   ['<span>12345平台 2025-02-19 16:18:25接到关于双桥区北欧云著小区物业被业委会侵犯合法权益派出所未予以立案的相关问题的诉求</span>'],
    //   ['<span>12389平台 2025-02-21 08:37:36接到姓名:迟皓泽关于河北省承德市公安局双滦分局执法办案方面/接处警、受立案、侦办等执法环节不作为、慢作为的诉求</span>'],
    //   ['<span>12389平台 2025-02-21 08:36:54接到姓名:金优敏关于河北省承德市公安局执法办案方面/接处警、受立案、侦办等执法环节不作为、慢作为的诉求</span>'],
    //   ['<span>12389平台 2025-02-20 09:12:29接到姓名:赵一玮关于河北省承德市公安局违反警纪方面/滥用警察身份与职权的诉求</span>'],
    //   ['<span>局长信箱 2025-02-20 14:03接到姓名:朱茜关于双桥分局要求警察介入的诉求</span>'],
    //   ['<span>局长信箱 2025-02-20 10:48接到姓名:钟心缘关于双滦分局承德市公安局双滦分局督察大队要求警察介入的诉求</span>'],
    //   ['<span>局长信箱 2025-02-20 09:36接到姓名:陈萍卿关于双桥分局双桥分局刑事侦查大队咨询案件进展的诉求</span>'],
    // ],
  data: props.data?.SheQingList,
  index: true,
  columnWidth: [50],
  align: ["center"],
});
</script>

<style scoped lang="scss">
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
  opacity: 0.3;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
  opacity: 0.3;
}

.el-card {
  background-color: rgba(0, 0, 0, 0.15);
}
</style>
